<template>
  <div class="box2">
    <p>我是componentA</p>
    <p>propName: {{ propName }}</p>
    <p>name: {{ name }}</p>
    <p>isPublished: {{ isPublished }}</p>
    <p>commentIds: {{ commentIds }}</p>
    <p>author: {{ author }}</p>
    <button @click="addAge">子组件传值给父组件</button>
  </div>
</template>

<script setup>
defineOptions({
    name: 'component-a',
    inheritAttrs: false ////不让属性直接渲染在根节点上
})

const props = defineProps({
    propName: {
        type: String,
        validator(value) {
          // 就是验证类似于表单那种
            // 这个propName必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].includes(value)
        }
    },
    name: String,
    isPublished: {
        type: Boolean,
        default: false //默认值
    },
    commentIds: {
    type: Array,
    default() {
      return [4, 5, 6]
    }
  },
  author: {
    type: Object,
    default() {
      return {
        name: '张三',
        age: 18
      }
    }
  }
})

</script>

<style  lang="scss" scoped>
</style>